{% assign show_bottom_border = false %}
{%- liquid
  assign custom_logo_width = section.settings.custom_logo_width | append: 'px'

  case section.settings.color_schema
    when 'primary'
      assign background_color = 'bg-primary'
      assign border_style = 'border-primary'
    when 'secondary'
      assign background_color = 'bg-secondary'
      assign border_style = 'border-secondary'
    when 'inverse'
      assign background_color = 'bg-inverse'
      assign border_style = 'border-inverse'
    when 'white'
      assign background_color = 'bg-white'
      assign show_bottom_border = true
    when 'black'
      assign background_color = 'bg-black'
      assign border_style = 'border-black'
  endcase
  case section.settings.text_color
    when 'white'
      assign text_color = 'text-inverse'
    else
      assign text_color = ''
  endcase
  assign is_desktop_logo_top_left = false
  if section.settings.show_full_width_header == false
    case section.settings.desktop_logo_position
      when 'top_center'
        assign pc_ul_wrapper = 'flex-lg-wrap'
        assign pc_li_logo_wrapper = 'col-lg-4'
        assign pc_li_tab_wrapper = 'order-lg-2'
        assign pc_li_tab_position = 'justify-content-lg-center px-lg-3'
        assign pc_li_user_cart_icon_wrapper = 'col-lg-4'
        assign pc_li_user_cart_icon_position = 'justify-content-lg-end'
        assign nav_menu_padding_top = 'nav-menu-padding-top'
      when 'top_left'
        assign pc_ul_wrapper = 'flex-lg-wrap'
        assign pc_li_logo_wrapper = 'col-lg-4 justify-content-lg-start'
        assign pc_li_tab_wrapper = 'order-lg-2'
        assign pc_li_tab_position = 'justify-content-lg-start px-lg-0'
        assign pc_li_user_cart_icon_wrapper = 'col-lg-4 offset-lg-4'
        assign pc_li_user_cart_icon_position = 'justify-content-lg-end'
        assign nav_menu_padding_top = 'nav-menu-padding-top'
        assign is_desktop_logo_top_left = true
      when 'middle_center'
        assign pc_ul_wrapper = 'flex-lg-row'
        assign pc_li_tab_position = 'justify-content-lg-center'
    endcase
  endif
  case section.settings.mobile_layout
    when 'logo_center'
      assign mb_li_user_cart_icon_wrapper = 'position-absolute'
      assign mb_li_tab_wrapper = 'position-absolute'
    when 'tab_first'
      assign mb_li_logo_wrapper = 'ms-3'
      assign mb_li_user_cart_icon_wrapper = 'flex-grow-1'
      assign mb_li_ul_position = 'justify-content-end'
    when 'logo_first'
      assign mb_li_user_cart_icon_wrapper = 'flex-grow-1'
      assign mb_li_tab_wrapper = 'order-2 ms-3'
      assign mb_li_ul_position = 'justify-content-end'
  endcase
  case section.settings.hover_style
    when 'highlight'
      assign hover_style = 'nav-link-highlight'
    when 'outline'
      assign hover_style = 'nav-link-outline'
    when 'text_outline'
      assign hover_style = 'nav-link-text-outline'
  endcase

  assign flag = false
  if section.settings.desktop_logo_position != 'middle_left' and section.settings.show_full_width_header == false
    assign logo_margin = 'm-lg-0'
    if section.settings.desktop_logo_position == 'top_left'
      assign flag = true
    endif
  elsif section.settings.show_full_width_header == true
    assign logo_margin = 'm-lg-0'
  endif

  if section.settings.show_separator_line == true
    assign show_box_shaw = 'site-header-box-shadow'
  endif

  case section.settings.sticky_header
    when 'always_sticky'
      assign sticky_number = 1
    when 'never_sticky'
      assign sticky_number = 2
    when 'scroll_sticky'
      assign sticky_number = 0
  endcase
-%}

{%- if settings.show_cart -%}
  {%- liquid
    assign show_mini_cart = false
    assign show_drawer_cart = false
    case settings.cart_type
      when 'drawer'
        assign show_mini_cart = false
        if request.page_type != 'cart'
          assign show_drawer_cart = true
        endif
      when 'mini_cart'
        assign show_drawer_cart = false
        if request.page_type != 'cart'
          assign show_mini_cart = true
        endif
      when 'page'
        assign show_drawer_cart = false
        assign show_mini_cart = false
    endcase
    if show_mini_cart or show_drawer_cart
      assign cart_dropdown_style = 'as-cart-dropdown as-dropdown dropdown cursor-pointer '
    endif
  -%}
{% endif %}
{% liquid
  for block in section.blocks
    if block.type == 'no_sticky_header'
      assign url = block.settings.link
    endif
  endfor
%}

<div class="header-v2 {% if section.settings.show_full_width_header == true %}header-full-width{% endif %}">
  {% comment %} <h1 class="mb-0 visuallyhidden position-absolute" style="z-index:-1;">Rokid</h1> {% endcomment %}
  {% for block in section.blocks %}
    {% if block.type == 'no_sticky_header' %}
      <input type="hidden" value="{{ block.settings.link }}" class="as-header-no-sticky-flag">
    {% endif %}
  {% endfor %}
  <input type="hidden" value="{{ sticky_number }}" class="as-header-sticky-flag">
  <input type="hidden" value="{{ section.settings.enable_transparent_header }}" class="as-header-enable-transparent">

  {% comment %} 检测是否为首页或者station详情页（此两个页面为沉浸式导航） {% endcomment %}
  {% comment %} template == 'index' or  {% endcomment %}
  {% if template == 'page.station-product' %}
    <input type="hidden" value="{{ template }}" class="as-page-template">
  {% endif %}

  <div class="dropdown-backdrop fade as-dropdown-backdrop"></div>
  <nav
    class="as-site-header {{ background_color }} {{ text_color }}  enable-transparency site-header-v2 navbar py-0 align-items-lg-center align-items-start {% unless show_bottom_border %} {{ border_style }} {% endunless %} {{ show_box_shaw }}"
    data-expand="true"
  >
    <div class="site-header-container {% if section.settings.show_full_width_header == true %}container-topic{% else %}container{% endif %} d-flex flex-column flex-lg-row justify-content-start justify-content-lg-between">
      {% comment %} 移动端 {% endcomment %}
      <ul class="list-unstyled flex-center d-lg-none w-100 mb-0 position-relative nav-height">
        <li class="nav-expand as-expand flex-center {{ mb_li_tab_wrapper }}">
          <div class="d-flex align-items-center">
            <div class="nav-toggler-wrapper">
              <button
                class="as-navbar-toggler navbar-toggler order-last border-0 px-0 collapsed"
                type="button"
                data-bs-toggle="collapse"
                aria-label="Navbar toggler"
              >
                <div class="hamburger-box-wrapper">
                  <span class="hamburger-box"></span>
                  <span class="hamburger-box"></span>
                  <span class="hamburger-box"></span>
                </div>
              </button>
            </div>
            {% if settings.show_search %}
            <div class="search-icon-wrapper" onclick="event.stopPropagation();">
              <a class="header-icon cursor-pointer nav-link" data-bs-toggle="modal" data-bs-target="#searchModal" onclick="event.stopPropagation();">
                {%- render 'icon-search' -%}
              </a>
            </div>
            {% endif %}
          </div>
        </li>
        <li class="flex-center logo nav-menu-item {{ mb_li_logo_wrapper }}">
          <a
            class="d-flex flex-column flex-center align-items-center text-decoration-none text-primary text-decoration-none"
            href="{{ routes.root_url }}"
          >
            {%- if section.settings.logo_image_on_other_header != blank -%}
              {%- assign image_size = section.settings.custom_logo_width | append: 'x' -%}
              {%- liquid
                assign response_height = section.settings.custom_logo_width | times: section.settings.logo_image_on_other_header.height | divided_by: section.settings.logo_image_on_other_header.width
              -%}
              <img
                class="as-logo-transparent-mob position-absolute logo-pic active"
                width="{{ section.settings.logo_image_on_transparent_header.width }}"
                height="{{ section.settings.logo_image_on_transparent_header.height }}"
                srcset="{{ section.settings.logo_image_on_transparent_header | img_url: image_size }} 1x, {{ section.settings.logo_image_on_transparent_header | img_url: image_size, scale: 2 }} 2x"
                src="{{ section.settings.logo_image_on_transparent_header | img_url: image_size }}"
                loading="lazy"
                alt="{{ section.settings.logo_image_on_transparent_header.alt | default: shop.name | escape }}"
                {% if response_height <= 40 %}
                  style="width: {{ custom_logo_width }}; height: auto;"
                {% endif %}
                {% if response_height > 40 %}
                  style="height: 40px; width: auto;"
                {% endif %}
              >
              <img
              class="as-logo-other-mob position-absolute logo-pic"
              width="{{ section.settings.logo_image_on_other_header.width }}"
              height="{{ section.settings.logo_image_on_other_header.height }}"
              srcset="{{ section.settings.logo_image_on_other_header | img_url: image_size }} 1x, {{ section.settings.logo_image_on_other_header | img_url: image_size, scale: 2 }} 2x"
              src="{{ section.settings.logo_image_on_other_header | img_url: image_size }}"
              loading="lazy"
              alt="{{ section.settings.logo_image_on_other_header.alt | default: shop.name | escape }}"
              {% if response_height <= 40 %}
                style="width: {{ custom_logo_width }}; height: auto;"
              {% endif %}
              {% if response_height > 40 %}
                style="height: 40px; width: auto;"
              {% endif %}
              >
                <img
                  style="visibility: hidden"
                  width="{{ section.settings.logo_image_on_other_header.width }}"
                  height="{{ section.settings.logo_image_on_other_header.height }}"
                  srcset="{{ section.settings.logo_image_on_other_header | img_url: image_size }} 1x, {{ section.settings.logo_image_on_other_header | img_url: image_size, scale: 2 }} 2x"
                  src="{{ section.settings.logo_image_on_other_header | img_url: image_size }}"
                  loading="lazy"
                  alt="{{ section.settings.logo_image_on_other_header.alt | default: shop.name | escape }}"
                  {% if response_height <= 40 %}
                    style="width: {{ custom_logo_width }}; height: auto;"
                  {% endif %}
                  {% if response_height > 40 %}
                    style="height: 40px; width: auto;"
                  {% endif %}
                >
            {%- else -%}
              <span class="flex-center mb-0">{% render 'icon-logo' %}</span>
            {%- endif -%}
          </a>
        </li>
        <li class="nav-menu-item  end-0 {{ mb_li_user_cart_icon_wrapper }}">
          <ul class="list-unstyled mb-0 nav-icon {{ mb_li_ul_position }}">
            {%- if settings.show_search and section.settings.mobile_layout != 'logo_center' -%}
              <div class="me-3">
                <a class="header-icon cursor-pointer nav-link" data-bs-toggle="modal" data-bs-target="#searchModal">
                  {%- render 'icon-search' -%}
                </a>
              </div>
            {%- endif -%}

            {%- if settings.show_cart -%}
              <li class="me-3">
                <cart-icon-bubble>
                  <a
                    class="position-relative icon-btn lh-1 icon-wrapper flex-center lead nav-fw nav-link"
                    {% if show_drawer_cart == false %}
                      href="{{ routes.cart_url }}"
                    {% endif %}
                    id="as-cart-icon-bubble"
                    data-id="cart-icon-bubble"
                    {% if show_drawer_cart %}
                      data-bs-toggle="offcanvas" data-bs-target="#drawer-cart-items" aria-controls="offcanvasRight"
                    {% endif %}
                  >
                    {% render 'cart-icon-bubble' %}
                  </a>
                </cart-icon-bubble>
              </li>
            {%- endif -%}
            {% if shop.customer_accounts_enabled %}
              {% if customer %}
                <li>
                  <a class="icon-btn icon-wrapper flex-center lead lh-1 nav-link" href="{{ routes.account_url }}">
                    <span class="icon-wrap-md">
                      {% render 'icon-user' %}
                    </span>
                  </a>
                </li>
              {% else %}
                <li>
                  <a class="icon-btn icon-wrapper flex-center lead lh-1 nav-link" href="{{ routes.account_login_url }}{%- render 'account-return-to-param' -%}">
                    <span class="icon-wrap-md">
                      {% render 'icon-user' %}
                    </span>
                  </a>
                </li>
              {% endif %}
            {% endif %}
          </ul>
        </li>
      </ul>
      {% comment %} pc端 {% endcomment %}
      <ul class="list-unstyled w-100 mb-0 nav-menu {{ nav_menu_padding_top }} flex-column flex-lg-row d-flex align-items-lg-center {% if section.settings.show_full_width_header == true %} justify-content-lg-between nav-menu-pading{% endif %} {{ pc_ul_wrapper }}">
        {%- if section.settings.desktop_logo_position == 'top_center'
          and section.settings.show_full_width_header == false
        -%}
          {%- if settings.show_search -%}
            <div class="d-none d-lg-block col-lg-4">
              <a class="cursor-pointer header-icon px-0 nav-link" data-bs-toggle="modal" data-bs-target="#searchModal">
                {%- render 'icon-search' -%}
              </a>
            </div>
          {%- endif -%}
        {%- endif -%}

        <li class="flex-center d-none d-lg-flex nav-menu-item {{ pc_li_logo_wrapper }}">
          {% comment %} flex-column {% endcomment %}
          <a
            class="logo d-flex align-items-center text-primary text-decoration-none {{ logo_margin }}"
            href="{{ routes.root_url }}"
          >
            {%- if section.settings.logo_image_on_other_header != blank -%}
              {%- assign image_size = section.settings.custom_logo_width | append: 'x' -%}
              {%- liquid
                assign response_height = section.settings.custom_logo_width | times: section.settings.logo_image_on_other_header.height | divided_by: section.settings.logo_image_on_other_header.width
              -%}
              <img
                class="as-logo-transparent-pc position-absolute logo-pic active"
                width="{{ section.settings.logo_image_on_transparent_header.width }}"
                height="{{ section.settings.logo_image_on_transparent_header.height }}"
                srcset="{{ section.settings.logo_image_on_transparent_header | img_url: image_size }} 1x, {{ section.settings.logo_image_on_transparent_header | img_url: image_size, scale: 2 }} 2x"
                src="{{ section.settings.logo_image_on_transparent_header | img_url: image_size }}"
                loading="lazy"
                alt="{{ section.settings.logo_image_on_transparent_header.alt | default: shop.name | escape }}"
                {% if response_height <= 40 %}
                  style="width: {{ custom_logo_width }}; height: auto;"
                {% endif %}
                {% if response_height > 40 %}
                  style="height: 40px; width: auto;"
                {% endif %}
              >
              <img
              class="as-logo-other-pc position-absolute logo-pic"
              width="{{ section.settings.logo_image_on_other_header.width }}"
              height="{{ section.settings.logo_image_on_other_header.height }}"
              srcset="{{ section.settings.logo_image_on_other_header | img_url: image_size }} 1x, {{ section.settings.logo_image_on_other_header | img_url: image_size, scale: 2 }} 2x"
              src="{{ section.settings.logo_image_on_other_header | img_url: image_size }}"
              loading="lazy"
              alt="{{ section.settings.logo_image_on_other_header.alt | default: shop.name | escape }}"
              {% if response_height <= 40 %}
                style="width: {{ custom_logo_width }}; height: auto;"
              {% endif %}
              {% if response_height > 40 %}
                style="height: 40px; width: auto;"
              {% endif %}
              >

              <img
                width="{{ section.settings.logo_image_on_other_header.width }}"
                height="{{ section.settings.logo_image_on_other_header.height }}"
                srcset="{{ section.settings.logo_image_on_other_header | img_url: image_size }} 1x, {{ section.settings.logo_image_on_other_header | img_url: image_size, scale: 2 }} 2x"
                src="{{ section.settings.logo_image_on_other_header | img_url: image_size }}"
                loading="lazy"
                alt="{{ section.settings.logo_image_on_other_header.alt | default: shop.name | escape }}"
                {% if response_height <= 40 %}
                  style="width: {{ custom_logo_width }}; height: auto;visibility: hidden;"
                {% endif %}
                {% if response_height > 40 %}
                  style="height: 40px; width: auto;"
                {% endif %}
              >
            {%- else -%}
              <span class="flex-center mb-0">{% render 'icon-logo' %}</span>
            {%- endif -%}
          </a>
        </li>

        <li class="flex-grow-0{% if section.settings.show_full_width_header == false %} flex-lg-grow-1{% endif %} {{ pc_li_tab_wrapper }}">
          {%- comment -%} 移动端 mobile_layout为 logo_center时的搜索 {%- endcomment -%}
          {%- if settings.show_search and section.settings.mobile_layout == 'logo_center' -%}
            <div
              class="cursor-pointer search-form-content search-modal-trigger d-lg-none"
              data-bs-toggle="modal"
              data-bs-target="#searchModal"
            >
              <form class="search-form  mobile-hidden">
                <div class="d-flex justify-content-center flex-wrap w-100">
                  <div class="input-text">
                    <span class="search-icon active nav-link">
                      {% render 'icon-search' %}
                    </span>
                    <input
                      type="text"
                      autocomplete="off"
                      value=""
                      class="form-control cursor-pointer"
                      placeholder="{{ 'sections.custom_search.placeholder' | t }}"
                      aria-label="{{ 'sections.custom_search.placeholder' | t }}"
                      disabled
                    >
                  </div>
                </div>
              
              </form>
            </div>
          {%- endif -%}

          {% comment %} Primary Menu  {% endcomment %}
          <ul class="d-flex flex-column flex-lg-row list-unstyled w-100 px-0 main-menu-wrapper as-nav-link-container nav-link-container {{ pc_li_tab_position }}">
            {%- for link in linklists[section.settings.main_menu].links -%}
              {% comment %}一级导航栏内没二级{% endcomment %}
              {% if link.levels == 0 %}
                <li class="nav-item nav-link-wrap{% if forloop.first == true and flag %} ps-lg-0{% endif %}">
                  <a
                    {% render 'link', link: link.url %}
                    class="nav-link {{ hover_style }} d-flex small nav-fw"
                    href="{{ link.url }}"
                  >
                    <span class="position-relative text-outline">{{ link.title }}</span>
                    
                    
                  </a>
                 
                </li>
                {% comment %}一级导航栏内有二级{% endcomment %}
              {% elsif link.levels >= 1 %}
                {% comment %}判断配置的图片链接是否有跟三级菜单链接相同的{% endcomment %}
                {% liquid
                  assign secondmenu_links = link.links | map: 'url'
                  assign thirdmenu_links = link.links | map: 'links' | map: 'url'
                  assign block_settings = section.blocks | where: 'type', 'mega_menu' | map: 'settings'
                  assign block_links = section.blocks | where: 'type', 'mega_menu' | map: 'settings' | map: 'menu_item'
                  assign has_matched_secondmenu_link = false
                  assign has_matched_thirdmenu_link = false
                  assign has_matched_img = false
                  assign has_matched_block = 'ddd'
                  for secondmenu_link in secondmenu_links
                    for block_setting in block_settings
                      if secondmenu_link == block_setting.link
                        assign has_matched_secondmenu_link = true
                        assign has_matched_block = block_setting.img
                        if has_matched_block != blank
                          assign has_matched_img = true
                        endif
                        break
                      endif
                    endfor
                  endfor

                  for thirdmenu_link in thirdmenu_links
                    for block_setting in block_settings
                      if thirdmenu_link == block_setting.link
                        assign has_matched_thirdmenu_link = true
                        assign has_matched_block = block_setting.img
                        if has_matched_block != blank
                          assign has_matched_img = true
                        endif
                        break
                      endif
                    endfor
                  endfor
                %}
                {% assign has_mega_menu = true %}
                {% if has_matched_secondmenu_link and link.levels < 2 and has_matched_img %}
                  {% assign has_mega_menu = false %}
                {% elsif has_matched_secondmenu_link == false and has_matched_thirdmenu_link and has_matched_img %}
                  {% assign has_mega_menu = false %}
                {% else %}
                  {% assign has_mega_menu = true %}
                {% endif %}
                {% comment %}一级导航栏{% endcomment %}
                <li
                  data-mega-menu="{{ has_matched_img }}"
                  data-secondmenu_link="{{ has_matched_secondmenu_link }}"
                  data-thirdmenu_link="{{ has_matched_thirdmenu_link }}"
                  class="nav-item as-dropdown dropdown d-flex flex-column flex-lg-row justify-content-start justify-content-lg-center{% if forloop.first == true and flag %} ps-lg-0{% endif %}"
                >
                  <a
                    id="dropdownMenuLink{{ forloop.index }}"
                    class="nav-link cursor-pointer {{ hover_style }} dropdown-toggle small nav-fw as-nav-link"
                    role="button"
                    data-bs-toggle="dropdown"
                    data-bs-auto-close="outside"
                    aria-expanded="false"
                  >
                    <span class="text-outline">{{ link.title }}</span>
                    <span class="mb-sr"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M11.6665 6L7.6665 10L3.6665 6" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg></span>
                    <span class="dropdown-icon d-lg-none d-block">{% render 'icon-chevron-down-header' %}</span>
                  </a>
                  {% render 'kiks-mega-menu',
                    link: link,
                    background_color: background_color,
                    if_first: forloop.first,
                    is_desktop_logo_top_left: is_desktop_logo_top_left,
                    desktop_columns_per_row: section.settings.desktop_columns_per_row,
                    menu_background: section.settings.menu_background,
                    has_matched_secondmenu_link: has_matched_secondmenu_link,
                    has_matched_thirdmenu_link: has_matched_thirdmenu_link,
                    has_matched_img: has_matched_img,
                    forloop: forloop
                  %}
                </li>
              {% endif %}
            {%- endfor -%}
          </ul>
        </li>
        <li class="nav-item dropdown d-block d-lg-none mobile-enjp-cls enjp_cls">
          <div class="p-0 flex-center lead icon-wrapper" data-bs-toggle="dropdown" aria-expanded="false" role="button" style="cursor: pointer;">
            <span>EN</span>
            <span class="En-lg">
              <span class="jp-lg">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11.6665 6L7.6665 10L3.6665 6" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </span>
            </span>
          </div>
  
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="https://global.rokid.com/?_ab=0&_fd=0&_sc=1">English</a></li>
            <li><a class="dropdown-item" href="https://jp.rokid.com/?_ab=0&_fd=0&_sc=1">日本語</a></li>
          </ul>
        </li>
        {% comment %} 购物车和账号登录 {% endcomment %}
        <li class="left-content-wrapper d-none d-lg-block position-relative nav-menu-item {{ pc_li_user_cart_icon_wrapper }}">
          <ul class="list-unstyled d-flex align-items-center mb-0 h-100 flex-column flex-lg-row px-3 px-lg-0 nav-icon me-n2 {{ pc_li_user_cart_icon_position }}">
            {%- if settings.show_search -%}
              {% unless section.settings.desktop_logo_position == 'top_center'
                and section.settings.show_full_width_header == false
              %}
                <div class="nav-item me-2">
                  <a class="header-icon cursor-pointer nav-link" data-bs-toggle="modal" data-bs-target="#searchModal">
                    {%- render 'icon-search' -%}
                  </a>
                </div>
              {% endunless %}
            {%- endif -%}

            {%- if settings.show_cart -%}
              <li class="nav-item me-2 me-md-3 {{ cart_dropdown_style }}">
                <cart-icon-bubble class="d-block cart-icon-bubble-wrapper">
                  <a
                    {% if show_drawer_cart == false %}
                      href="{{ routes.cart_url }}"
                    {% endif %}
                    {% if show_drawer_cart %}
                      data-bs-toggle="offcanvas" data-bs-target="#drawer-cart-items" aria-controls="offcanvasRight"
                    {% endif %}
                    class="dropdown-toggle icon-btn lh-1 nav-link {% if section.settings.desktop_logo_position == 'middle_left' or section.settings.show_full_width_header == true %}{{ hover_style }}{% endif %}"
                    id="as-cart-icon-bubble-web"
                    data-id="cart-icon-bubble"
                  >
                    {% render 'cart-icon-bubble' %}
                  </a>
                </cart-icon-bubble>

                <li class="nav-item dropdown d-none d-lg-block enjp_cls">
                  <div class="p-0 flex-center lead icon-wrapper" data-bs-toggle="dropdown" aria-expanded="false" role="button" style="cursor: pointer;">
                    <span>EN</span>
                    <span class="En-lg">
                      <span class="jp-lg">
                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M11.6665 6L7.6665 10L3.6665 6" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                      </span>
                    </span>
                  </div>

                  <ul class="dropdown-menu hidden" style="display:none;">
                    <li><a class="dropdown-item" href="https://global.rokid.com/?_ab=0&_fd=0&_sc=1&_gl=1*1cjf1x9*_gcl_au*MTE3NDI2OTg4NS4xNzQ4NDMzNTkyLjM0NDQxMDkwMy4xNzUxNDQ5MTQ2LjE3NTE0NDkxNDU.">English</a></li>
                    <li><a class="dropdown-item" href="https://jp.rokid.com/?_ab=0&_fd=0&_sc=1&_gl=1*1cjf1x9*_gcl_au*MTE3NDI2OTg4NS4xNzQ4NDMzNTkyLjM0NDQxMDkwMy4xNzUxNDQ5MTQ2LjE3NTE0NDkxNDU.">日本語</a></li>
                  </ul>
                  {% render 'region-selector' %}
                </li>
                {% if show_mini_cart %}
                  <mini-cart
                    id="mini-cart-items"
                    class="mini-cart-container dropdown-menu position-absolute end-0 overflow-hidden bg-default py-0 lh-base text-wrap"
                    data-id="mini-cart"
                  >
                    {% render 'mini-cart' %}
                  </mini-cart>
                {% endif %}
              </li>
            {%- endif -%}
            {% if shop.customer_accounts_enabled %}
              {% if customer %}
                <li
                  class="nav-item cursor-pointer as-dropdown dropdown d-flex flex-column flex-lg-row justify-content-start justify-content-lg-center{% if section.settings.show_full_width_header == true %} pe-lg-0{% endif %}"
                  tabindex="0"
                >
                  <div class="position-relative h-100 flex-center icon-wrapper lead">
                    <a
                      class="d-flex nav-link {% if section.settings.desktop_logo_position == 'middle_left' or section.settings.show_full_width_header == true %}{{ hover_style }}{% endif %} dropdown-toggle small icon-btn"
                      data-bs-toggle="dropdown"
                      aria-expanded="false"
                    >
                      <span class="icon-wrap-md d-inline-block">{% render 'icon-user' %}</span>
                      {% if customer.name %}
                        <span class="ms-1">{{ customer.name | truncate: 12 }}</span>
                      {% endif %}
                    </a>
                    <div class="as-dropdown-menu px-3 px-lg-2 py-0 dropdown-menu overflow-hidden dropdown-menu-center user-dropdown text-start {{ background_color }}">
                      <div class="pb-lg-2 pt-lg-2">
                        <a class="dropdown-item px-lg-4" href="{{ routes.account_url }}">
                          {{- 'customer.account.my_orders' | t -}}
                        </a>
                        <a class="dropdown-item px-lg-4" href="{{ routes.account_addresses_url }}">
                          {{- 'customer.account.my_addresses' | t -}}
                        </a>
                        <hr class="my-2">
                        <a class="dropdown-item px-lg-4" href="{{ routes.account_logout_url }}">
                          {{- 'customer.customer.log_out' | t -}}
                        </a>
                      </div>
                    </div>
                  </div>
                </li>
              {% else %}
                <li class="nav-item d-none d-lg-block{% if section.settings.show_full_width_header == true %} pe-lg-0{% endif %}">
                  <div class="p-0 flex-center lead icon-wrapper">
                    <a
                      href="{{ routes.account_login_url }}"
                      class="nav-link icon-btn {% if section.settings.desktop_logo_position == 'middle_left' or section.settings.show_full_width_header == true %}{{ hover_style }}{% endif %} lh-1 icon-wrap-md"
                      ><span class="d-inline-block">{% render 'icon-user' %}</span></a
                    >
                  </div>
                </li>
              {% endif %}
            {% endif %}
          </ul>
        </li>
      </ul>

      {%- if settings.show_search -%}
        <details-modal>
          <div class="search-modal-overlay as-modal-overlay d-none d-lg-block"></div>
          {% render 'search-modal', background_color: background_color, text_color: text_color %}
        </details-modal>
      {%- endif -%}
    </div>
  </nav>
</div>
{%- if request.page_type == 'index' -%}
  <h1 class="visually-hidden">Rokid</h1>
{%- endif -%}
{%- if settings.show_cart -%}
  {%- if settings.add_to_cart_action == 'show_added_msg' and show_mini_cart -%}
    <div class="cart-notification-container container">
      {% render 'cart-notification', class: 'd-none d-md-block' %}
    </div>
  {%- endif -%}
{%- endif -%}
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const searchIcon = document.querySelector('.search-icon-wrapper a');
    if (searchIcon) {
      searchIcon.addEventListener('click', function(e) {
        e.stopPropagation();
      });
    }
  });
</script>
<style>
  @media(max-width:1024px){
    html body .shopify-section-header.as-shopify-header .header-v2 .as-site-header .site-header-container {
      padding: 10px 16px;
    }
    html body .shopify-section-header.as-shopify-header .header-v2 .as-site-header .site-header-container ul .nav-item.as-dropdown .nav-link.show .dropdown-icon{
      transform: rotate(0deg);
    }
    html body .shopify-section-header.as-shopify-header .header-v2 .as-site-header .site-header-container ul .nav-item.as-dropdown .as-dropdown-menu .dropdown-item-wrapper .dropdown-item .dropdown-icon svg{
      width: 18px !important;
      height: 18px !important;
    }
    html body .shopify-section-header.as-shopify-header .header-v2 .as-site-header .site-header-container ul .nav-item.as-dropdown .as-dropdown-menu .dropdown-item-wrapper .dropdown-item{
      padding-right: 0 !important;
    }
  }
</style>
{% schema %}
{
  "name": "Header",
  "tag": "header",
  "class": "shopify-section-header as-shopify-header immersion-header",
  "settings": [
    {
      "type": "select",
      "id": "color_schema",
      "label": "Background color",
      "options": [
        {
          "value": "primary",
          "label": "Primary"
        },
        {
          "value": "secondary",
          "label": "Secondary"
        },
        {
          "value": "inverse",
          "label": "Inverse"
        },
        {
          "value": "white",
          "label": "White"
        },
        {
          "value": "black",
          "label": "Black"
        }
      ],
      "default": "white"
    },
    {
      "type": "select",
      "id": "text_color",
      "label": "Text color",
      "options": [
        {
          "value": "white",
          "label": "White"
        },
        {
          "value": "black",
          "label": "Black"
        }
      ],
      "default": "black"
    },
    {
      "type": "checkbox",
      "id": "enable_transparent_header",
      "label": "Enable transparent header",
      "default": true
    },
    {
      "type": "header",
      "content": "LOGO"
    },
    {
      "label": "Logo image on transparent header",
      "type": "image_picker",
      "id": "logo_image_on_transparent_header"
    },
    {
      "label": "Logo image on other header",
      "type": "image_picker",
      "id": "logo_image_on_other_header"
    },
    {
      "type": "range",
      "id": "custom_logo_width",
      "min": 50,
      "max": 250,
      "step": 10,
      "default": 70,
      "unit": "px",
      "label": "Custom logo width"
    },
    {
      "type": "link_list",
      "label": "Main menu",
      "id": "main_menu",
      "default": "main-menu"
    },
    {
      "type": "select",
      "id": "desktop_logo_position",
      "label": "Desktop logo position",
      "options": [
        {
          "value": "middle_left",
          "label": "Middle left"
        },
        {
          "value": "middle_center",
          "label": "Middle center"
        },
        {
          "value": "top_left",
          "label": "Top left"
        },
        {
          "value": "top_center",
          "label": "Top center"
        }
      ],
      "default": "middle_left"
    },
    {
      "type": "checkbox",
      "id": "show_full_width_header",
      "label": "Show full width header on Desktop",
      "default": false,
      "info": "Logo is fixed on the left side."
    },
    {
      "type": "select",
      "id": "mobile_layout",
      "label": "Mobile layout",
      "options": [
        {
          "value": "logo_center",
          "label": "Logo on center"
        },
        {
          "value": "tab_first",
          "label": "Tab first"
        },
        {
          "value": "logo_first",
          "label": "Logo first"
        }
      ],
      "default": "logo_center"
    },
    {
      "type": "select",
      "id": "hover_style",
      "label": "Hover style",
      "options": [
        {
          "value": "highlight",
          "label": "Highlight"
        },
        {
          "value": "outline",
          "label": "Outline"
        },
        {
          "value": "text_outline",
          "label": "Text outline"
        }
      ],
      "default": "highlight"
    },
    {
      "type": "checkbox",
      "id": "show_separator_line",
      "label": "Show separator line",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "adapt_to_image_size",
      "label": "Adapt to Image Size",
      "default": false,
      "info": "It works on images in mega menu"
    },
    {
      "type": "color",
      "id": "menu_background",
      "label": "Menu Block Background",
      "default": "#f8f9fa"
    },
    {
      "type": "radio",
      "id": "desktop_columns_per_row",
      "label": "Desktop columns per row",
      "options": [
        {
          "value": "5",
          "label": "5"
        },
        {
          "value": "6",
          "label": "6"
        }
      ],
      "default": "5"
    },
    {
      "type": "select",
      "id": "sticky_header",
      "label": "Sticky header",
      "options": [
        {
          "value": "always_sticky",
          "label": "Always sticky"
        },
        {
          "value": "never_sticky",
          "label": "Never"
        }
      ],
      "default": "never_sticky"
    }
  ],
  "blocks": [
    {
      "type": "mega_menu",
      "name": "Mega menu",
      "settings": [
         {
          "type": "text",
          "id": "menu_item",
          "label": "Menu item",
          "info": "Enter a link title from your main navigation"
        },
        {
          "type": "header",
          "content": "Extended Promotion"
        },
        {
          "type": "image_picker",
          "id": "img",
          "label": "Image"
        },
        {
          "type": "url",
          "id": "link",
          "label": "Link"
        },
        {
          "type": "text",
          "id": "text",
          "label": "text"
        },
        {
          "type": "image_picker",
          "id": "img_2",
          "label": "Image"
        },
        {
          "type": "url",
          "id": "link_2",
          "label": "Link"
        },
        {
          "type": "text",
          "id": "text_2",
          "label": "text"
        }
      ]
    },
    {
      "type": "mega_menu_with_images",
      "name": "Mega menu with images",
      "settings": [
        {
          "type": "text",
          "id": "menu_item",
          "label": "Menu item",
          "info": "Enter a link title from your main navigation"
        },
        {
          "type": "header",
          "content": "Category Images"
        },
        {
          "type": "image_picker",
          "id": "category_1_image",
          "label": "Category 1 Image"
        },
        {
          "type": "url",
          "id": "category_1_link",
          "label": "Category 1 Link"
        },
        {
          "type": "image_picker",
          "id": "category_2_image",
          "label": "Category 2 Image"
        },
        {
          "type": "url",
          "id": "category_2_link",
          "label": "Category 2 Link"
        },
        {
          "type": "image_picker",
          "id": "category_3_image",
          "label": "Category 3 Image"
        },
        {
          "type": "url",
          "id": "category_3_link",
          "label": "Category 3 Link"
        },
        {
          "type": "image_picker",
          "id": "category_4_image",
          "label": "Category 4 Image"
        },
        {
          "type": "url",
          "id": "category_4_link",
          "label": "Category 4 Link"
        },
        {
          "type": "header",
          "content": "Promotional Banner"
        },
        {
          "type": "image_picker",
          "id": "promo_image",
          "label": "Promotional Image"
        },
        {
          "type": "url",
          "id": "promo_link",
          "label": "Promotional Link"
        },
        {
          "type": "text",
          "id": "promo_text",
          "label": "Promotional Text"
        }
      ]
    },
    {
      "type": "no_sticky_header",
      "name": "No sticky header",
      "settings": [
        {
          "type": "url",
          "id": "link",
          "label": "Link"
        }
      ]
    }
  ]
}
{% endschema %}
